<template>
  <div class="container mx-auto px-4 py-6">
    <div class="mb-6">
      <h2 class="text-2xl font-semibold text-gray-800 mb-2">权限控制演示</h2>
      <p class="text-gray-600">当前用户角色：{{ getUserRoleDescription() }}</p>
    </div>

    <!-- 使用权限包装组件 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
      <!-- 管理员专用功能 -->
      <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">管理员专用功能</h3>
        <PermissionWrapper :roles="['ADMIN']">
          <div class="space-y-3">
            <button class="w-full px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
              删除所有数据
            </button>
            <button class="w-full px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700">
              系统配置
            </button>
            <button class="w-full px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
              用户管理
            </button>
          </div>
        </PermissionWrapper>
      </div>

      <!-- 领导专用功能 -->
      <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">领导专用功能</h3>
        <PermissionWrapper :roles="['ADMIN', 'LEADER']">
          <div class="space-y-3">
            <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
              审批申请
            </button>
            <button class="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
              查看统计
            </button>
            <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
              生成报表
            </button>
          </div>
        </PermissionWrapper>
      </div>

      <!-- 实验室管理员功能 -->
      <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">实验室管理员功能</h3>
        <PermissionWrapper :roles="['ADMIN', 'LAB_MANAGER']">
          <div class="space-y-3">
            <button class="w-full px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700">
              创建申请
            </button>
            <button class="w-full px-4 py-2 bg-cyan-600 text-white rounded-md hover:bg-cyan-700">
              设备借用
            </button>
            <button class="w-full px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700">
              易耗品领用
            </button>
          </div>
        </PermissionWrapper>
      </div>

      <!-- 通用功能 -->
      <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">通用功能</h3>
        <PermissionWrapper :roles="['ADMIN', 'LEADER', 'LAB_MANAGER']">
          <div class="space-y-3">
            <button class="w-full px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
              查看设备列表
            </button>
            <button class="w-full px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
              查看借还记录
            </button>
            <button class="w-full px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
              查看维修记录
            </button>
          </div>
        </PermissionWrapper>
      </div>
    </div>

    <!-- 使用权限指令 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">使用权限指令控制元素显示</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div v-role="['ADMIN']" class="p-4 bg-red-100 rounded-lg">
          <h4 class="font-semibold text-red-800">管理员可见</h4>
          <p class="text-red-600 text-sm">只有管理员能看到这个内容</p>
        </div>
        <div v-role="['ADMIN', 'LEADER']" class="p-4 bg-blue-100 rounded-lg">
          <h4 class="font-semibold text-blue-800">管理员和领导可见</h4>
          <p class="text-blue-600 text-sm">管理员和领导能看到这个内容</p>
        </div>
        <div v-role="['ADMIN', 'LAB_MANAGER']" class="p-4 bg-green-100 rounded-lg">
          <h4 class="font-semibold text-green-800">管理员和实验室管理员可见</h4>
          <p class="text-green-600 text-sm">管理员和实验室管理员能看到这个内容</p>
        </div>
      </div>
    </div>

    <!-- 权限检查函数演示 -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">权限检查函数演示</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <h4 class="font-medium text-gray-700 mb-3">角色检查</h4>
          <ul class="space-y-2 text-sm">
            <li class="flex justify-between">
              <span>是否为管理员：</span>
              <span :class="isAdmin() ? 'text-green-600' : 'text-red-600'">
                {{ isAdmin() ? '是' : '否' }}
              </span>
            </li>
            <li class="flex justify-between">
              <span>是否为领导：</span>
              <span :class="isLeader() ? 'text-green-600' : 'text-red-600'">
                {{ isLeader() ? '是' : '否' }}
              </span>
            </li>
            <li class="flex justify-between">
              <span>是否为实验室管理员：</span>
              <span :class="isLabManager() ? 'text-green-600' : 'text-red-600'">
                {{ isLabManager() ? '是' : '否' }}
              </span>
            </li>
          </ul>
        </div>
        <div>
          <h4 class="font-medium text-gray-700 mb-3">权限检查</h4>
          <ul class="space-y-2 text-sm">
            <li class="flex justify-between">
              <span>管理权限：</span>
              <span :class="hasManagePermission() ? 'text-green-600' : 'text-red-600'">
                {{ hasManagePermission() ? '有' : '无' }}
              </span>
            </li>
            <li class="flex justify-between">
              <span>审批权限：</span>
              <span :class="hasApprovalPermission() ? 'text-green-600' : 'text-red-600'">
                {{ hasApprovalPermission() ? '有' : '无' }}
              </span>
            </li>
            <li class="flex justify-between">
              <span>申请权限：</span>
              <span :class="hasApplicationPermission() ? 'text-green-600' : 'text-red-600'">
                {{ hasApplicationPermission() ? '有' : '无' }}
              </span>
            </li>
            <li class="flex justify-between">
              <span>统计权限：</span>
              <span :class="hasStatisticsPermission() ? 'text-green-600' : 'text-red-600'">
                {{ hasStatisticsPermission() ? '有' : '无' }}
              </span>
            </li>
            <li class="flex justify-between">
              <span>报表权限：</span>
              <span :class="hasReportPermission() ? 'text-green-600' : 'text-red-600'">
                {{ hasReportPermission() ? '有' : '无' }}
              </span>
            </li>
            <li class="flex justify-between">
              <span>用户管理权限：</span>
              <span :class="hasUserManagePermission() ? 'text-green-600' : 'text-red-600'">
                {{ hasUserManagePermission() ? '有' : '无' }}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { 
  isAdmin, 
  isLeader, 
  isLabManager, 
  hasManagePermission, 
  hasApprovalPermission, 
  hasApplicationPermission, 
  hasStatisticsPermission, 
  hasReportPermission, 
  hasUserManagePermission, 
  getUserRoleDescription 
} from '@/utils/permission'
import PermissionWrapper from '@/components/PermissionWrapper.vue'
</script>
